<template>
    <el-dialog
        v-model="tenantAuthAddDialogVisible"
        title="添加租户授权"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="tenantAuthDataForm" :rules="tenantAuthRules" ref="tenantAuthDataFormRef">
                <el-form-item label="租户编码" label-width="20%" prop="tenantId">
                    <el-select v-model="tenantAuthDataForm.tenantId" placeholder="租户编码" :loading="tenantInfoSearchLoading" clearable filterable remote :remote-method="tenantDataSearch">
                        <el-option :label="item.tenantId" :value="item.tenantId" v-for="item in tenantDataList" :key="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户账号" label-width="20%" prop="userId">
                    <el-select v-model="tenantAuthDataForm.userId" placeholder="用户账号" :loading="userInfoSearchLoading" clearable filterable remote :remote-method="userInfoDataSearch">
                        <el-option :label="item.userAccount" :value="item.id" v-for="item in userInfoDataList" :key="item.id"/>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog()">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {tenantAuthInfoCreate, tenantAuthInfoQuery, tenantInfoQuery} from "@/request/tenant";
import {userInfoQuery} from "@/request/user";

export default {
    name: "TenantAuthAddDialog",
    props: ['tenantAuthDataForm'],
    data() {
        return {
            tenantDataList: [],
            userInfoDataList: [],
            tenantAuthRules: {
                tenantId: [{ required: true, message: '租户编码不能为空', trigger: 'blur' }],
                userId: [{ required: true, message: '用户不能为空', trigger: 'blur' }]
            },
            saveLoading: false,
            userInfoSearchLoading: false,
            tenantInfoSearchLoading: false
        }
    },
    computed: {
        tenantAuthAddDialogVisible() {
            return this.$store.state.tenantAuthAddDialogVisible
        },
        tenantAuthSearchData() {
            return this.$store.state.tenantAuthSearchData
        }
    },
    methods: {
        cancelDialog() {
            this.$store.state.tenantAuthAddDialogVisible = false
        },
        submitDialog() {
            this.saveLoading = true
            let formEl = this.$refs['tenantAuthDataFormRef']
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                   // 添加授权记录
                    tenantAuthInfoCreate(this.tenantAuthDataForm).then(res => {
                        if (res.code === '200') {
                            tenantAuthInfoQuery(this.tenantAuthSearchData).then(searchRes => {
                                this.$store.state.tenantAuthDataList = searchRes.data
                            })
                            this.$store.state.tenantAuthAddDialogVisible = false
                        }
                        this.saveLoading = false
                    }).catch(res => {
                        this.saveLoading = false
                    })
                }
            })
        },
        userInfoDataSearch(query) {
            this.userInfoSearchLoading = true
            let param = {
                pageInfo: {
                    pageIndex: 1,
                    pageSize: 100
                },
                userAccount: query
            }
            userInfoQuery(param).then(res => {
                this.userInfoDataList = res.data.dataList;
                this.userInfoSearchLoading = false
            }).catch(res => {
                this.userInfoSearchLoading = false
            })
        },
        tenantDataSearch(query) {
            this.tenantInfoSearchLoading = true
            let param = {
                pageInfo: {
                    pageIndex: 1,
                    pageSize: 100
                },
                tenantId: query
            }
            tenantInfoQuery(param).then(res => {
                this.tenantDataList = res.data.dataList;
                this.tenantInfoSearchLoading = false
            }).catch(res => {
                this.tenantInfoSearchLoading = false
            })
        }
    }
}
</script>

<style scoped lang="less">

</style>